// 主图添加{ bobotitle }

import { upDataImage } from "@Api/shopsApi"
import {
  Button,
  Icon,
  InputNumber,
  message,
  Popover,
  Slider,
  Space,
  Upload,
  Radio,
  Modal,
  Switch,
  ImgDefault,
  Spin
} from "@bytedance/mona-ui"
import React, { useState, useEffect } from "react"
import { getObjectURL, shuffleArray } from "./copyDataFomate"
import { useAppDispatch, useAppSelector } from "~store"
import {
  setZhutuAddImageList34
} from "~store/controller/jinritemaiCopyGoods"
import AiOpenImageComp from "./AIImageComp"

import "./index.scss"
const ossurl = process.env.PLASMO_PUBLIC_CN_OSS
function getMoveItemInfo(getitrem: number, bi) {
  let mobeInfo = {}
  switch (getitrem) {
    case 1:
      mobeInfo = {
        left: 5,
        top: 5,
        offseX: 5,
        offsetY: 5,
        width: 15,
        height: Math.round(bi * 15)
      }
      break
    case 2:
      mobeInfo = {
        left: 0,
        top: 0,
        offseX: 0,
        offsetY: 0,
        width: 100,
        height: 133.33
      }
      break
    default:
      break
  }
  return mobeInfo
}
let addTimeData
// 图片组件
const MoveImageBpx = (props: any) => {
  const {
    imageData,
    picImages,
    setPicWatermark,
    length,
    setMoterIndex,
    goodsDetellData
  } = props
  if (!imageData) return null
  const dispatch = useAppDispatch()
  const zhutuAddImageList34 = useAppSelector(state => state.jinritemaiCopyGoods.zhutuAddImageList34)
  const [imageState, setImageState] = useState(imageData)

  useEffect(() => {
    if (imageState !== imageData) {
      setImageState(imageData)
    }
  }, [imageData])
  useEffect(() => {
    if (imageState !== imageData) {
      if (addTimeData) {
        clearTimeout(addTimeData)
        addTimeData = null
      }
      addTimeData = setTimeout(() => {
        const conterData = JSON.parse(JSON.stringify(zhutuAddImageList34))
        conterData[setMoterIndex].list[imageState.index] = imageState
        dispatch(setZhutuAddImageList34(JSON.parse(JSON.stringify(conterData))))
      }, 150)
      return
    }
  }, [imageState])
  const [addIfameStatus, setAddIfameStatus] = useState(false)
  const [setAddInfoData, setAddInfoDataFun] = useState<any>([])
  const SetImgContent = () => {

    let tuoconter: any = null

    return (<div
      style={{
        width: 200
      }}>
      <span>{picImages.config.selectType === 1 ? '图标' : '边框'}大小：</span>

      <Slider
        defaultValue={imageState.watermark.width}
        max={100}
        min={0}
        onChange={(e) => {
          if (tuoconter) {
            clearTimeout(tuoconter)
            tuoconter = null
          }
          tuoconter = setTimeout(() => {
            imageState.watermark.width = e
            imageState.watermark.height = Math.round(imageState.watermark.bi * e)
            setImageState({ ...imageState })
          }, 500)
        }}
      />
      <div className="boter">
        <Upload
          btnType="link"
          btnText={imageState.watermark.url ? `更换${picImages.config.selectType === 1 ? '图标' : '图片'}` : `添加${picImages.config.selectType === 1 ? '图标' : '图片'}`}
          btnIcon={<AddIcon />}
          maxCount={1}
          showUploadList={false}
          beforeUpload={(file) => {
            const fileType = /\image\/\/*/
            if (fileType.test(file.type)) {
              const imageUrl: any = getObjectURL(file)
              var img = new Image()
              img.src = imageUrl
              img.addEventListener("load", () => {
                const iw = img.width
                const ih = img.height
                const bi = ih / iw
                imageState.watermark.url = imageUrl
                imageState.watermark.bi = bi
                imageState.watermark.height = picImages.config.selectType === 1 ? Math.round(
                  bi * imageState.watermark.width
                ) : 133.33
                setImageState({ ...imageState })
              })
              return
            }
            message.error("仅支持图片")
          }}
        />
        {imageState.watermark.url && (
          <>
            <Button
              type="link"
              style={{ marginLeft: 8 }}
              onClick={() => {
                const typeConter = getMoveItemInfo(picImages.config.selectType, imageState.watermark.bi)
                const touWers = Object.assign(imageState.watermark, typeConter)
                imageState.watermark = touWers
                setImageState({ ...imageState })
              }}>
              恢复默认
            </Button>
            <Button
              type="link"
              style={{ marginLeft: 8, color: "red" }}
              onClick={() => {
                const typeConter = getMoveItemInfo(picImages.config.selectType, imageState.watermark.bi)
                const touWers = Object.assign(imageState.watermark, typeConter)
                imageState.watermark = touWers
                imageState.watermark.url = ''
                setImageState({ ...imageState })
              }}>
              删除{picImages.config.selectType === 1 ? '图标' : '图片'}
            </Button>
          </>
        )}
      </div>
      <div className="sortDom">
        排序：
        <InputNumber
          showCounter
          max={length}
          defaultValue={imageState.index + 1}
          min={1}
          onChange={(e: any) => {
            imageState.index = e - 1
            setPicWatermark(imageState)
          }}
        />
      </div>
    </div>)
  }
  return (<>
    <Popover
      placement="top"
      mouseEnterDelay={0.5}
      content={
        <SetImgContent />
      }
    >
      <div className="moverbox" style={{
        height: 133.33
      }}>
        <Space direction="vertical" size={4} align="center">
          <div
            className="seterimage"
            style={{
              height: 133.33
            }}
            onClick={(e) => {
              e.stopPropagation()
            }}
            onMouseMove={(e: any) => {
              if (imageState?.watermark.moveStatus) {
                const distanceX = e.pageX - imageState.watermark.pageX
                const distanceY = e.pageY - imageState.watermark.pageY
                imageState.watermark.left = Math.round(imageState.watermark.offseX + distanceX)
                imageState.watermark.top = Math.round(imageState.watermark.offseY + distanceY)
                setImageState({ ...imageState })
              }
            }}
          >
            {imageState.url ?
              <img src={(() => {
                const imgae = imageState.url?.replace('obj/', '')
                return imgae + '~100x133_q75.image'
              })()} className="couyimage" style={{
                height: 133.33
              }} /> : <div className="couyimage" style={{
                height: '100%',
                display: 'flex',
                alignItems: 'center',
                fontSize: 12,
                textAlign: 'center',
                justifyContent: 'center'
              }}>
                可以添加3:4图片
              </div>
            }
            {imageState.watermark?.url && (
              <img
                src={imageState.watermark.url}
                alt="water"
                draggable="false"
                style={{
                  width: imageState.watermark.width + "px",
                  height: imageState.watermark.height + "px",
                  top: imageState.watermark.top + "px",
                  left: imageState.watermark.left + "px"
                }}
                onMouseDown={(e: any) => {
                  imageState.watermark.moveStatus = false
                  imageState.watermark.setImageStatus = false
                  imageState.watermark.moveStatus = true
                  imageState.watermark.pageX = e.pageX
                  imageState.watermark.pageY = e.pageY
                  imageState.watermark.offseX = e.target.offsetLeft
                  imageState.watermark.offseY = e.target.offsetTop
                  imageState.watermark.clickTime = new Date().getTime()
                  setImageState({ ...imageState })
                }}
                onMouseUp={(e: any) => {
                  imageState.watermark.moveStatus = false
                  const upTime = new Date().getTime()
                  if (upTime - imageState.watermark.clickTime < 100) {
                    imageState.watermark.setImageStatus = !imageState.watermark.setImageStatus
                  }
                  setImageState({ ...imageState })
                }}
                className="wterioconbos"
              />
            )}
          </div>
          {/* <Button size="mini" style={{
            width: '100px'
          }} onClick={() => {
            if (!imageState.url && !imageState.watermark.url) {
              Modal.warning({
                title: '提示',
                content: '存在空图像无法操作， 请添加图片后继续',
              })
              return
            }
            setAddIfameStatus(true)
            setAddInfoDataFun([[{
              url: imageState.url || imageState.watermark.url,
              index: 0,
              priindex: 0
            }]])
          }}>AI作图</Button> */}
        </Space>
      </div>
    </Popover>
    <AiOpenImageComp
      visible={addIfameStatus}
      onCancel={() => setAddIfameStatus(false)}
      type='4'
      setAddInfoData={setAddInfoData}
      product_id={goodsDetellData.product_id}
      img_format={2}
      onChangeImage={(data) => {
        console.log('传递出来的数据', data)
        if (data && data[0]) {
          if (data[0][0] && data[0][0].res_url) {
            setImageState({ ...imageState, url: data[0][0].res_url })
          }
        }
        setAddIfameStatus(false)
      }}
    ></AiOpenImageComp>
  </>)
}

const { AddIcon, FinishIcon } = Icon
const AddBodersContent = (props: any) => {
  if (!props) return null
  const {
    goodsDetellData,
    copyGoodConfig
  } = props

  if (!goodsDetellData) return
  const { copynum } = copyGoodConfig
  const dispatch = useAppDispatch()
  let addMaxImage = 5
  // 转化图片列表数据
  function getPricImageInfo(moveinfo: any) {
    // const getrAer = JSON.parse(goodsDetellData?.main_image_three_to_four)
    // console.log('getrAer', getrAer)
    const picImages =
      goodsDetellData?.main_pic_3_4?.map((res: any, index: number) => {
        return {
          url: res,
          watermark: {
            ...moveinfo,
            bi: 0,
            pageX: 0,
            pageY: 0,
            url: null,
            moveStatus: false,
            clickTime: 0,
            setImageStatus: false,
            mergeurl: null
          },
          moveImageStatus: false,
          translateX: index * 120,
          left: 0,
          top: 0,
          pageX: 0,
          pageY: 0,
          zIndex: 1,
          elemCenterPx: 0,
          index,
          is34: true
        }
      }) || []
    let showInadeAddImage = addMaxImage - goodsDetellData?.main_pic_3_4?.length
    for (let ine = 0; ine < showInadeAddImage; ine++) {
      picImages.push({
        url: '',
        watermark: {
          ...moveinfo,
          bi: 0,
          pageX: 0,
          pageY: 0,
          url: null,
          moveStatus: false,
          clickTime: 0,
          setImageStatus: false,
          mergeurl: null
        },
        moveImageStatus: false,
        translateX: ine * 120,
        left: 0,
        top: 0,
        pageX: 0,
        pageY: 0,
        zIndex: 1,
        elemCenterPx: 0,
        index: ine,
        is34: true
      })
    }
    return picImages
  }
  const zhutuImageList: any = useAppSelector(state => state.jinritemaiCopyGoods.zhutuImageList)
  function addimageList(type) {
    let forList: any = []
    for (let i = 0; i < copynum; i++) {
      forList.push(addImageItem(type))
    }
    return forList
  }
  function addImageItem(type) {
    return {
      config: {
        selectType: type
      },
      list: getPricImageInfo(getMoveItemInfo(type, 0))
    }
  }
  const [picImageList, setPicImageList] = useState<any[]>(addimageList(2))
  useEffect(() => {
    dispatch(setZhutuAddImageList34(JSON.parse(JSON.stringify(picImageList))))
  }, [picImageList])

  const [showImageKu, setShowImageKu] = useState(false)

  const [selectImages, setSelectImages] = useState<any[]>(zhutuImageList.map((res) => {
    // console.log('边框', res)
    return {
      select: false,
      url: process.env.PLASMO_PUBLIC_CN_OSS + res
      // url: 'https://wtplug.oss-cn-hangzhou.aliyuncs.com/' + res
    }
  }))

  const [seleCtcontenrIndex, setSeleCtcontenrIndex] = useState(-1)
  const [addImageberderLodin, setAddimageLodin] = useState(false)
  useEffect(() => {
    if (picImageList.length === copynum) return
    const addConter = copynum - picImageList.length
    if (addConter > 0) {
      for (let i = 0; i < addConter; i++) {
        picImageList.push(addImageItem(1))
      }
    } else {
      picImageList.splice(addConter, Math.abs(addConter))
    }
    setPicImageList([...picImageList])
  }, [copynum])
  const [addWorker, setAddWorker] = useState(true)
  const [addIfameStatus, setAddIfameStatus] = useState(false)
  const [setAddInfoData, setSetAddInfoData] = useState<any[]>([])
  return (
    < div style={{
      marginLeft: 25
    }}>
      <Space direction="vertical">
        {false && <Button
          type="primary"
          disabled={picImageList.length >= copyGoodConfig.copynum}
          size="mini"
          onClick={() => {
            picImageList.push({
              config: {
                selectType: 2
              },
              list: getPricImageInfo(getMoveItemInfo(1, 0))
            })
            setPicImageList([...picImageList])
          }}>
          添加图片组
        </Button>}
        <div className="imsgecontenbo">
          <Space direction="vertical">
            <div className="sye" style={{
              color: '#000',
              fontSize: 14,
              fontWeight: 900,
            }}>
              批量调整

            </div>
            <Space>
              <Button size="mini" onClick={() => {
                let nomigae = false

                const assetAddInfoData = picImageList.map((res: any, priindex) => {
                  // res.list = shuffleArray(res.list)
                  return res.list.map((itewms: any, index) => {
                    // itewms.index = index
                    if (!itewms.url && !itewms.watermark.url) {
                      nomigae = true
                    }
                    return { url: itewms.url || itewms.watermark.url, index, priindex }
                  })
                })
                if (nomigae) {
                  Modal.warning({
                    title: '提示',
                    content: '存在空图像 无法批量操作， 请添加图片后选择',
                  })
                  return
                }
                // console.log('setAddInfoData', assetAddInfoData)
                setSetAddInfoData([...assetAddInfoData])
                setAddIfameStatus(true)

              }}>批量AI作图(全部3:4主图)</Button>
              <Button type="link" className="conetrs" onClick={() => {
                picImageList.forEach((res: any) => {
                  res.list = shuffleArray(res.list)
                  res.list.forEach((itewms: any, index) => {
                    itewms.index = index
                  })
                })
                setPicImageList([...picImageList])
              }}>打乱全部3:4主图</Button>
              <Button type="link" className="conetrs" onClick={() => {
                setSeleCtcontenrIndex(-2)
                setShowImageKu(true)
              }}>批量添加边框</Button>
              <Space size={2}>
                <Switch checked={addWorker} size="small" onChange={e => {
                  console.log('e', e, picImageList)
                  picImageList.forEach((res: any) => {
                    res.list && res.list.forEach((items: any) => {
                      items.worderker = e
                    })
                  })
                  setPicImageList([...picImageList])
                  setAddWorker(e)
                }} />
                添加3:4主图水印
                <Popover content={(
                  <Space direction="vertical" align="center">
                    <ImgDefault
                      imgSrc={ossurl + "funsaction/convert/whertPPt.png?x-oss-process=image/resize,h_300,m_lfit"}
                      width="300px"
                      height="300px"
                      borderRadius={0}></ImgDefault>
                    将在3:4主图右下角添加随机字母水印
                  </Space>
                )}>
                  <Icon type="DoubtIcon"></Icon>
                </Popover>
              </Space>
            </Space>

          </Space>

        </div>
        {...picImageList.map((picImages, indexbser) => {
          return (<div className="imsgecontenbo" key={indexbser}>
            <Space direction="vertical">
              <div className="ciner">
                3:4图片 {indexbser + 1}
              </div>
              <Radio.Group
                value={picImages.config.selectType}
                onChange={(e) => {
                  picImages.config.selectType = e.target.value * 1
                  picImages.list = getPricImageInfo(getMoveItemInfo(e.target.value * 1, 0))
                  setPicImageList([...picImageList])
                }}
              >
                <Radio value={2}>添加边框</Radio>
                <Radio value={1}>添加图标</Radio>
              </Radio.Group>
              <Space size={20}>
                <div className="conternotoue">
                  <div className="topmovuerfoter" style={{
                    // height: 180
                    height: 145
                  }}>
                    {...picImages.list.map((res: any, index: number) => {
                      return (
                        <MoveImageBpx
                          setMoterIndex={indexbser}
                          imageData={res}
                          key={index}
                          picImages={picImages}
                          length={picImages.list.length}
                          goodsDetellData={goodsDetellData}
                          setPicWatermark={(e) => {
                            const arrMap = new Array(picImages.list.length)
                            arrMap[e.index] = picImages.list[index]
                            picImages.list.splice(index, 1)
                            const sortdate = picImages.list.sort(
                              (a, b) => a.index - b.index
                            )
                            for (let i = 0; i < arrMap.length; i++) {
                              if (!arrMap[i]) {
                                const inputdata = sortdate.splice(0, 1)
                                arrMap[i] = inputdata[0]
                              }
                            }
                            arrMap.forEach((mpi, indexer) => {
                              mpi.index = indexer
                              mpi.translateX = indexer * 120
                            })
                            picImages.list = arrMap
                            setPicImageList([...picImageList])
                          }} />
                      )
                    })}
                  </div>
                  <div>
                    <Space>
                      <Button onClick={() => {
                        setAddIfameStatus(true)
                        let nomigae = false
                        const assetAddInfoData = picImageList.map((res: any, priindex) => {
                          // res.list = shuffleArray(res.list)
                          return res.list.map((itewms: any, index) => {
                            // itewms.index = index
                            if (priindex === indexbser && !itewms.url && !itewms.watermark.url) {
                              nomigae = true
                            }
                            return { url: priindex === indexbser ? (itewms.url || itewms.watermark.url) : '', index, priindex }
                          })
                        })
                        if (nomigae) {
                          Modal.warning({
                            title: '提示',
                            content: '存在空图像 无法批量操作， 请添加图片后选择',
                          })
                          return
                        }
                        // console.log('setAddInfoData', assetAddInfoData)
                        setSetAddInfoData([...assetAddInfoData])
                        setAddIfameStatus(true)
                      }}>批量AI作图</Button>
                      <Upload
                        btnText={`上传${picImages.config.selectType === 1 ? '图标' : '边框或图片'}`}
                        btnType="default"
                        btnIcon={<AddIcon />}
                        maxCount={5}
                        multiple
                        showUploadList={false}
                        customRequest={(e) => {
                          console.log('ee', e)
                        }}
                        beforeUpload={(file) => {
                          console.log('file', file)
                          const fileType = /\image\/\/*/
                          if (fileType.test(file.type)) {
                            const imageUrl = getObjectURL(file)
                            var img: any = new Image()
                            img.src = imageUrl
                            img.addEventListener("load", () => {
                              const iw = img.width
                              const ih = img.height
                              const bi = ih / iw
                              picImages.list.forEach((picItem) => {
                                picItem.watermark.url = imageUrl
                                picItem.watermark.bi = bi
                                picItem.watermark.height = picImages.config.selectType === 1 ? Math.round(bi * picItem.watermark.width) : 133.33
                              })
                              setPicImageList([...picImageList])
                            })
                            return
                          }
                          message.error("仅支持图片")
                        }}
                      />
                      {/* <Button type="link">历史{picImages.config.selectType === 1 ? '图标' : '边框'}</Button> */}
                      <Button
                        type="link"
                        onClick={() => {
                          picImages.list.forEach((item) => {
                            const infodater = getMoveItemInfo(
                              picImages.config.selectType,
                              item.watermark.bi
                            )
                            const mergewet = Object.assign(item.watermark, infodater)
                            item.watermark = mergewet
                          })
                          setPicImageList([...picImageList])
                        }}>
                        恢复默认
                      </Button>
                      <Button
                        type="link"
                        onClick={() => {
                          picImages.list.forEach((picItem) => {
                            picItem.watermark.url = null
                            picItem.watermark.bi = 0
                            picItem.watermark.height = 0
                          })
                          setPicImageList([...picImageList])
                        }}>
                        清除所有{picImages.config.selectType === 1 ? '图标' : '边框'}
                      </Button>
                      {picImages.config.selectType === 2 &&
                        <Button type="link"
                          onClick={() => {
                            setSeleCtcontenrIndex(indexbser)
                            return setShowImageKu(true)
                          }}
                        >
                          {picImages.config.selectType === 1 ? '图标' : '边框'}库
                        </Button>
                      }
                      {/* <Button type="link" onClick={() => mergeImageFun(picImages)}>
                        测试合成图片
                      </Button> */}

                    </Space>
                  </div>
                </div>
                <div className="deletcontenty">
                  {false && <Icon
                    type="DeleteIcon"
                    onClick={() => {
                      if (picImageList.length === 1) {
                        return message.warning('至少保留一个')
                      }
                      picImageList.splice(indexbser, 1)
                      setPicImageList([...picImageList])
                    }}></Icon>}
                </div>
              </Space>
            </Space>
          </div>)
        })
        }
      </Space>
      <Modal
        width={650}
        visible={showImageKu}
        title={`选择边框 ${seleCtcontenrIndex === -2 ? `(${selectImages.filter(item => item.select).length}/${copynum}) ${selectImages.filter(item => item.select).length >= copynum ? '(已选完)' : ''}` : ''}`}
        okText=" 确定"
        cancelText=" 取消"
        onCancel={() => setShowImageKu(false)}
        // onOk={() => {
        //   const isSelectImageItem = selectImages.find(si => si.select)
        //   // const imageUrl = getObjectURL(file)
        //   var img: any = new Image()
        //   img.src = isSelectImageItem.url
        //   img.addEventListener("load", () => {
        //     const iw = img.width
        //     const ih = img.height
        //     const bi = ih / iw
        //     picImageList[seleCtcontenrIndex].list.forEach((picItem) => {
        //       picItem.watermark.url = isSelectImageItem.url
        //       picItem.watermark.bi = bi
        //       picItem.watermark.height = picImageList[seleCtcontenrIndex].config.selectType === 1 ? Math.round(bi * picItem.watermark.width) : 133.33
        //     })
        //     setPicImageList([...picImageList])
        //   })

        //   setShowImageKu(false)
        // }}
        onOk={() => {
          if (seleCtcontenrIndex !== -2) {
            const isSelectImageItem = selectImages.find(si => si.select)
            // const imageUrl = getObjectURL(file)
            var img: any = new Image()
            img.src = isSelectImageItem.url
            img.addEventListener("load", () => {
              const iw = img.width
              const ih = img.height
              const bi = ih / iw
              picImageList[seleCtcontenrIndex].list.forEach((picItem) => {
                picItem.watermark.url = isSelectImageItem.url
                picItem.watermark.bi = bi
                picItem.watermark.height = picImageList[seleCtcontenrIndex].config.selectType === 1 ? Math.round(bi * picItem.watermark.width) : 133.33
              })
              setPicImageList([...picImageList])
              setAddimageLodin(false)
            })
            setShowImageKu(false)
            // selectImages.forEach((item) => {
            //   item.select = false
            // })
            setSelectImages([...selectImages])
            return
          }
          setAddimageLodin(true)

          const selectIImages = selectImages.filter(item => item.select)
          let cbIndex = 0
          addImgaesar(selectIImages, () => {
            setShowImageKu(false)
            selectImages.forEach((item) => {
              item.select = false
            })
            setAddimageLodin(false)
            setSelectImages([...selectImages])
          })
          function addImgaesar(selectItem, cb) {
            if (!selectItem.length) {
              return cb && cb()
            }

            const aselectier = selectItem.splice(0, 1)
            var img: any = new Image()
            img.src = aselectier[0].url
            img.addEventListener("load", () => {
              const iw = img.width
              const ih = img.height
              const bi = ih / iw
              picImageList[cbIndex].config.selectType = 2
              picImageList[cbIndex].list.forEach((picItem) => {
                const typeConter = getMoveItemInfo(2, bi)
                const touWers = Object.assign(picItem.watermark, typeConter)
                picItem.watermark = touWers
                picItem.watermark.url = aselectier[0].url
                picItem.watermark.bi = bi
                picItem.watermark.height = picImageList[cbIndex].config.selectType === 1 ? Math.round(bi * picItem.watermark.width) : 133.33
              })
              setPicImageList([...picImageList])
              cbIndex++
              addImgaesar(selectItem, cb)
            })
          }



        }}
      >
        <Spin spinning={addImageberderLodin}>
          <div className="selectListerimgae">
            {selectImages.map((res: any, index: number) => {
              return (
                <div className="contr" key={index}>
                  <img
                    className="imageconer"
                    src={res.url}
                    alt={res.url}
                    onClick={() => {
                      if (seleCtcontenrIndex !== -2) {
                        selectImages.forEach((item) => {
                          item.select = false
                        })
                        res.select = true
                        setSelectImages([...selectImages])
                        return
                      }
                      const selectLength = selectImages.filter(item => item.select).length
                      // console.log('slectall', seleCtcontenrIndex, copynum)
                      if (res.select) {
                        res.select = false
                        setSelectImages([...selectImages])
                        return
                      }
                      if (selectLength < copynum) {
                        res.select = true
                        setSelectImages([...selectImages])
                        return
                      }
                      message.warning('最多选择' + copynum + '张图片')
                    }}
                  //   onClick={() => {
                  //     selectImages.forEach((item) => {
                  //       item.select = false
                  //     })
                  //     res.select = true
                  //     setSelectImages([...selectImages])
                  //   }}
                  // />
                  />

                  {res.select && <FinishIcon className="selectImage" />}
                </div>
              )
            })}
          </div>
        </Spin>

      </Modal>
      <AiOpenImageComp
        visible={addIfameStatus}
        onCancel={() => setAddIfameStatus(false)}
        type='4'
        setAddInfoData={setAddInfoData}
        product_id={goodsDetellData.product_id}
        img_format={2}
        onChangeImage={(data) => {
          console.log('data', data)
          data.forEach((item, index) => {
            item.forEach((iyee, its) => {
              if (iyee.res_url) {
                picImageList[iyee.priindex].list[iyee.index].url = iyee.res_url
              }
            })
          })
          setSetAddInfoData([...picImageList])
          setAddIfameStatus(false)
        }}
      ></AiOpenImageComp>
    </div>
  )
}

export default AddBodersContent
